<template>
	<div class="property-panel">
		<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
		<div class="p-10 panel-form">
			<component
				ref="propertyRef"
				:is="getComponent"
				v-if="element"
				:element="element"
				:modeler="modeler"
				:users="users"
				:groups="groups"
				:exps="exps"
				:categorys="categorys"
			/>
		</div>
	</div>
</template>

<script setup>
/************************** 动态组件 ***************************/
import taskPanel from './components/task';
import startEndPanel from './components/startEnd';
import processPanel from './components/process';
import sequenceFlowPanel from './components/sequenceFlow';
import gatewayPanel from './components/gateway';
import { NodeName } from './lang/zh';

let propertyRef = ref(null);
const props = defineProps({
		// 用户数据
		users: {
			type: Array,
			required: true
		},
		groups: {
			type: Array,
			required: true
		},
		// 流程分类
		categorys: {
			type: Array,
			required: true
		},
		exps: {
			type: Array,
			default: () => []
		},
		modeler: {
			type: Object,
			required: true
		}
	}),
	element = ref(null);

let getComponent = computed(() => {
		const type = element.value?.type;
		if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
			return startEndPanel;
		}
		if (
			[
				'bpmn:UserTask',
				'bpmn:Task',
				'bpmn:SendTask',
				'bpmn:ReceiveTask',
				'bpmn:ManualTask',
				'bpmn:BusinessRuleTask',
				'bpmn:ServiceTask',
				'bpmn:ScriptTask'
				// 'bpmn:CallActivity',
				// 'bpmn:SubProcess'
			].includes(type)
		) {
			return taskPanel;
		}
		if (type === 'bpmn:SequenceFlow') {
			return sequenceFlowPanel;
		}
		if (['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway'].includes(type)) {
			return gatewayPanel;
		}
		if (type === 'bpmn:Process') {
			return processPanel;
		}
		return null;
	}),
	nodeName = computed(() => {
		if (element.value) {
			const bizObj = element.value.businessObject;
			const type = bizObj?.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
			return NodeName[type] || type;
		}
		return '';
	});

onMounted(() => {
	handleModeler();
});

function handleModeler() {
	props.modeler.on('root.added', (e) => {
		if (e.element.type === 'bpmn:Process') {
			element.value = null;
			nextTick(() => {
				element.value = e.element;
			});
		}
	});
	props.modeler.on('element.click', (e) => {
		const {
			element: { type }
		} = e;
		if (type === 'bpmn:Process' || type === 'bpmn:SequenceFlow' || type === 'bpmn:EndEvent') {
			nextTick(() => {
				element.value = e.element;
			});
		}
	});
	props.modeler.on('selection.changed', (e) => {
		// hack 同类型面板不刷新
		element.value = null;
		if (e.newSelection[0]) {
			nextTick(() => {
				element.value = e.newSelection[0];
			});
		}
	});
}

defineExpose({
	propertyValidate: async () => {
		return await propertyRef.value?.childValidate();
	}
});
</script>

<style lang="scss">
.property-panel {
	// reset element css
	.el-form--label-top .el-form-item__label {
		padding: 0;
	}
	// 设置设计器右侧表单高度
	.el-form-item {
		margin-bottom: 22px;
	}
	.tab-table .el-form-item {
		margin-bottom: 16px;
	}
	.node-name {
		border-bottom: 1px solid #ccc;
		padding: 10px;
		font-size: 16px;
		font-weight: bold;
	}
}

.flow-containers .el-badge__content.is-fixed {
	top: 10px;
}

.el-popper,
.panel-form {
	color-scheme: light;
	--el-color-primary: #409eff;
	--el-color-primary-light-3: #79bbff;
	--el-color-primary-light-5: #a0cfff;
	--el-color-primary-light-7: #c6e2ff;
	--el-color-primary-light-8: #d9ecff;
	--el-color-primary-light-9: #ecf5ff;
	--el-color-primary-dark-2: #337ecc;
	--el-color-success: #67c23a;
	--el-color-success-light-3: #95d475;
	--el-color-success-light-5: #b3e19d;
	--el-color-success-light-7: #d1edc4;
	--el-color-success-light-8: #e1f3d8;
	--el-color-success-light-9: #f0f9eb;
	--el-color-success-dark-2: #529b2e;
	--el-color-warning: #e6a23c;
	--el-color-warning-light-3: #eebe77;
	--el-color-warning-light-5: #f3d19e;
	--el-color-warning-light-7: #f8e3c5;
	--el-color-warning-light-8: #faecd8;
	--el-color-warning-light-9: #fdf6ec;
	--el-color-warning-dark-2: #b88230;
	--el-color-danger: #f56c6c;
	--el-color-danger-light-3: #f89898;
	--el-color-danger-light-5: #fab6b6;
	--el-color-danger-light-7: #fcd3d3;
	--el-color-danger-light-8: #fde2e2;
	--el-color-danger-light-9: #fef0f0;
	--el-color-danger-dark-2: #c45656;
	--el-color-error: #f56c6c;
	--el-color-error-light-3: #f89898;
	--el-color-error-light-5: #fab6b6;
	--el-color-error-light-7: #fcd3d3;
	--el-color-error-light-8: #fde2e2;
	--el-color-error-light-9: #fef0f0;
	--el-color-error-dark-2: #c45656;
	--el-color-info: #909399;
	--el-color-info-light-3: #b1b3b8;
	--el-color-info-light-5: #c8c9cc;
	--el-color-info-light-7: #dedfe0;
	--el-color-info-light-8: #e9e9eb;
	--el-color-info-light-9: #f4f4f5;
	--el-color-info-dark-2: #73767a;
	--el-bg-color: #ffffff;
	--el-bg-color-page: #f2f3f5;
	--el-bg-color-overlay: #ffffff;
	--el-text-color-primary: #303133;
	--el-text-color-regular: #606266;
	--el-text-color-secondary: #909399;
	--el-text-color-placeholder: #a8abb2;
	--el-text-color-disabled: #c0c4cc;
	--el-border-color: #dcdfe6;
	--el-border-color-light: #e4e7ed;
	--el-border-color-lighter: #ebeef5;
	--el-border-color-extra-light: #f2f6fc;
	--el-border-color-dark: #d4d7de;
	--el-border-color-darker: #cdd0d6;
	--el-fill-color: #f0f2f5;
	--el-fill-color-light: #f5f7fa;
	--el-fill-color-lighter: #fafafa;
	--el-fill-color-extra-light: #fafcff;
	--el-fill-color-dark: #ebedf0;
	--el-fill-color-darker: #e6e8eb;
	--el-fill-color-blank: #ffffff;
	--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
	--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
	--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
	--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
}
</style>
